<template>
  <div class="user-manage-deldia">
    <Dialog
      class="dialog"
      top="22vh"
      width="29%"
      title="确认"
      v-model:visible="props.delDiaFlag"
      :showImg="false"
    >
      <template #showImg>
        <img src="../../../assets/images/false.png" @click="hidenDia" alt="" />
      </template>
      <template #content>
        <div class="content">确定要删除吗？</div>
      </template>
      <template #footer>
        <div class="btn-wrap">
          <button class="cancel" @click="hidenDia">取消</button>
          <button class="sure" @click="sure">确定</button>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
let props = defineProps(["delDiaFlag"]);
let emit = defineEmits(["update:delDiaFlag", "delDiaSure"]);
const hidenDia = () => {
  emit("update:delDiaFlag", false);
};

const sure = () => {
  emit("delDiaSure");
};
</script>
<style lang="scss" scoped>
.user-manage-deldia {
  .content {
    font-size: 36px;
    font-weight: 500;
    color: #333333;
    margin: 100px 0 124px 0;
    text-align: center;
  }
  .btn-wrap {
    text-align: center;
    margin-bottom: 51px;
    button {
      width: 109px;
      height: 51px;
      border-radius: 5px;
      font-size: 24px;
      font-weight: 500;
      color: #ffffff;
    }
    .cancel {
      background: #d73d32;
    }
    .sure {
      background: #0250f9;
      margin-left: 25px;
    }
  }
  img {
    width: 19px;
    height: 19px;
    cursor: pointer;
  }
}
</style>
